<template>
  <div class="myCareer">
    <header>
      <div class="container">
        <div class="titleList">
          <ul>
            <li
              v-for="(item,index) in titleList"
              :key="index"
              :class="item.name===preTitle?'checked':''">
              <h4  @click="checkItem(item)">{{item.name}}</h4>
            </li>
          </ul>
        </div>
        <div class="content">
          <div
            :style="{left: contentBoxLeft}"
            class="contentBox">
            <div class="myCollect"> <myCollect /> </div>
            <div class="myEvaluation"> <myEvaluation /> </div>
            <div class="myCheck"> <myCheck /> </div>
            <div class="myVolunteer"> <myVolunteer /> </div>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  import myCollect from './collectBox/myCollect'
  import myEvaluation from './collectBox/myEvaluation'
  import myCheck from './collectBox/myCheck'
  import myVolunteer from './collectBox/myVolunteer'
    export default {
        name: "myCareer",
        data() {
            return {
                contentBoxLeft: '0',
                preTitle: '我的收藏',
                titleList: [
                    {'name': '我的收藏', 'id': 1, 'className': 'myCollect', 'left': '0'},
                    {'name': '我的测评', 'id': 2, 'className': 'myEvaluation', 'left': '-1000px'},
                    {'name': '我的选科', 'id': 3, 'className': 'myCheck', 'left': '-2000px'},
                    {'name': '我的志愿填报', 'id': 4, 'className': 'myVolunteer', 'left': '-3000px'}
                ]
            }
        },
        created() {

        },
        components: {
            myCollect,
            myEvaluation,
            myCheck,
            myVolunteer
        },
        methods: {
            // 切换tabs
            checkItem(item) {
                this.preTitle = item.name;
                this.contentBoxLeft = item.left;
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../styles/common.scss';
  @import '../../styles/myCareer/myCareer.scss';
</style>